
// 序列号录入
<template>
  <view class="page">
    <!-- tabs -->
    <view class="tabsBox">
      <view
        v-for="(item, index) in list"
        :key="index"
        :class="current == index ? 'activeTabs' : 'itemTabs'"
        @tap="change(index)"
      >
        {{ item.name }}
      </view>
    </view>
    <view class="border-box"></view>
    <!-- 内容区域 -->
    <view class="content">
      <!-- 批量录入 -->
      <view class="batch-box" v-if="current === 1">
        <view class="op-item-box">
          <view class="item">
            <text class="item-label">前缀</text>
            <input type="text" placeholder="可以为空" v-model="prefix" />
          </view>
          <view class="item">
            <text class="item-label">起始号</text>
            <input type="text" placeholder="请输入" v-model="startNumber" />
          </view>
          <view class="item">
            <text class="item-label">递增量</text>
            <input
              type="text"
              placeholder="请输入"
              v-model.number="incremental"
            />
          </view>
          <view class="item">
            <text class="item-label">个数</text>
            <input
              type="text"
              placeholder="请输入"
              v-model.number="addNumber"
            />
          </view>
        </view>
      </view>
      <!-- 添加 -->
      <view class="addBtn" v-if="current === 1">
        <view @tap="addBtn">添加</view>
      </view>
      <!-- 序列号 备注 -->
      <view class="item-box" v-for="(item, index) in form" :key="index">
        <view class="item">
          <text class="item-label">序列号</text>
          <input
            @input="inputChange(index, $event)"
            type="text"
            placeholder="请输入"
            v-model="item.serial"
          />
        </view>
        <view class="item">
          <text class="item-label">备注</text>
          <input
            v-if="item.flag === false"
            type="text"
            placeholder="请输入"
            v-model="item.remark"
          />
          <input
            v-if="item.flag === true"
            type="text"
            placeholder="请输入"
            v-model="item.flagValue"
          />
        </view>
        <view class="item">
          <text @tap="addItem(index)" class="iconfont icon-a-1"></text>
          <text @tap="dlItem(index)" class="iconfont icon-shanchu"></text>
        </view>
      </view>
    </view>

    <!-- 保存 -->
    <view class="save-box">
      <view @tap="saveBtn">确认</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      editSerial: '',
      // 序列号 备注
      form: [{ serial: '', remark: '', flag: false, flagValue: '' }],
      // 前缀
      prefix: '',
      // 起始号
      startNumber: '001',
      // 递增量
      incremental: 1,
      // 个数
      addNumber: 1,

      list: [
        {
          name: '基本录入序列号'
        },
        {
          name: '批量录入序列号'
        }
      ],
      current: 0,
      // 缓存
      cache: {},
      // 购货单页面 → 添加序列号
      type: ''
    }
  },
  onLoad(options) {
    this.type = options.type
    let editSerial = options.editSerial
    if (editSerial == 'editSerial') {
      this.editSerial = editSerial
      // 获取缓存数据
      if (uni.getStorageSync('serialEntryCache').form) {
        let cacheBack = uni.getStorageSync('serialEntryCache')
        console.log('赋值之前序列号1', uni.getStorageSync('serialEntryCache'))

        if (cacheBack.form.length > 0) {
          this.form = cacheBack.form
        } else {
          this.form = [
            {
              flag: false,
              flagValue: '',
              remark: '',
              serial: ''
            }
          ]
        }
      }
      console.log('赋值序列号', this.form)
    } else {

      // 获取缓存数据
      let cacheBack = uni.getStorageSync('serialEntryCache')
      let serialList = uni.getStorageSync('serialList')
      console.log(cacheBack,serialList)
      if (cacheBack) {
        this.form = cacheBack.form
      } else if (serialList) {
        this.form = serialList
      }
      if (!this.form.length) {
        this.form = [
          {
            flag: false,
            flagValue: '',
            remark: '',
            serial: ''
          }
        ]
      }
    }
  },

  methods: {
    // 输入事件
    inputChange(index, e) {
      // 判断index = 1 的时候
      this.form.forEach((item, index) => {
        let indexa = index + 1
        if (this.form[0].serial !== item.serial) {
          this.form[0].flag = false
          this.form[0].flagValue = ''
        } else if (index !== 0) {
          this.form[0].flag = true
          this.form[0].flagValue = '序列号与第' + indexa + '个相同'
        }
      })
      //从上至下
      for (let i = 0; i < this.form.length - 1; i++) {
        for (let j = i + 1; j < this.form.length; j++) {
          if (
            this.form[i].serial === this.form[j].serial &&
            (this.form[i].serial !== '' || this.form[j].serial !== '')
          ) {
            this.form[i].flag = true
            this.form[j].flag = true
            let j1 = j + 1
            let i1 = i + 1
            this.form[i].flagValue = '序列号与第' + j1 + '个相同'
            this.form[j].flagValue = '序列号与第' + i1 + '个相同'
          } else {
            if (index === i) {
              this.form[i].flag = false
              this.form[i].flagValue = ''
            }
            if (index === j) {
              this.form[j].flag = false

              this.form[j].flagValue = ''
            }
            // 判断index = 1 的时候

            this.form.forEach((item, index) => {
              let indexa = index + 1
              if (this.form[0].serial !== item.serial) {
                this.form[0].flag = false
                this.form[0].flagValue = ''
              } else if (index !== 0) {
                this.form[0].flag = true
                this.form[0].flagValue = '序列号与第' + indexa + '个相同'
              }
            })
          }
        }
      }
      // 从下至上
      for (let i = this.form.length - 1; i > 0; i--) {
        for (let j = i - 1; j >= 0; j--) {
          if (
            this.form[i].serial === this.form[j].serial &&
            (this.form[i].serial !== '' || this.form[j].serial !== '')
          ) {
            this.form[i].flag = true
            this.form[j].flag = true
            let j1 = j + 1
            let i1 = i + 1
            this.form[i].flagValue = '序列号与第' + j1 + '个相同'
            this.form[j].flagValue = '序列号与第' + i1 + '个相同'
          } else {
            if (index === i) {
              this.form[i].flag = false
              this.form[i].flagValue = ''
            }
            if (index === j) {
              this.form[j].flag = false

              this.form[j].flagValue = ''
            }
            // 判断index = 1 的时候

            this.form.forEach((item, index) => {
              let indexa = index + 1
              if (this.form[0].serial !== item.serial) {
                this.form[0].flag = false
                this.form[0].flagValue = ''
              } else if (index !== 0) {
                this.form[0].flag = true
                this.form[0].flagValue = '序列号与第' + indexa + '个相同'
              }
            })
          }
        }
      }
    },
    // 点击添加
    addBtn() {
      let flag1 = /\D/g.test(this.startNumber)
      let flag2 = /\D/g.test(this.incremental)
      let flag3 = /\D/g.test(this.addNumber)
      if (this.startNumber === '') {
        uni.showToast({
          title: '请输入起始号',
          icon: 'none',
          mask: true
        })
      } else if (this.incremental === null) {
        uni.showToast({
          title: '请输入递增量',
          icon: 'none',
          mask: true
        })
      } else if (this.addNumber === null) {
        uni.showToast({
          title: '请输入个数',
          icon: 'none',
          mask: true
        })
      } else if (flag1 === true) {
        uni.showToast({
          title: '请输入正确的起始号',
          icon: 'none',
          mask: true
        })
      } else if (flag2 === true) {
        uni.showToast({
          title: '请输入正确的递增量',
          icon: 'none',
          mask: true
        })
      } else if (flag3 === true) {
        uni.showToast({
          title: '请输入正确的个数',
          icon: 'none',
          mask: true
        })
      } else {
        let startNum = this.prefix + this.startNumber
        let stre = this.startNumber.length
        let transStart = parseInt(this.startNumber)
        let trans = ''
        let len = null
        let sub = null
        console.log('序列号', this.form)

        if (
          this.form.length == 1 &&
          this.form[0].serial === '' &&
          this.form[0].remark === ''
        ) {
          this.form = []
        }

        for (let i = 0; i < this.addNumber; i++) {
          let result = this.form.find((item) => item.serial == startNum)
          if (!result) {
            this.form.push({
              serial: startNum,
              remark: '',
              flag: false,
              flagValue: ''
            })
          }
          transStart += this.incremental

          trans = transStart + ''
          len = trans.length
          sub = stre - len

          let transStartA = transStart
          if (stre > len) {
            for (let j = 0; j < sub; j++) {
              transStartA = '0' + transStartA
              startNum = transStartA
            }
          } else {
            // transStartA = '0' + transStartA
            startNum = transStartA
          }

          startNum = this.prefix + startNum
        }
      }
    },
    // 删除序列号
    dlItem(index) {
      if (this.form.length <= 1) {
        return this.$tools.toast('至少保留一条数据')
      }
      this.form.splice(index, 1)
      //从上至下

      for (let i = 0; i < this.form.length; i++) {
        for (let j = i + 1; j < this.form.length; j++) {
          if (
            this.form[i].serial === this.form[j].serial &&
            (this.form[i].serial !== '' || this.form[j].serial !== '')
          ) {
            this.form[i].flag = true
            this.form[j].flag = true
            let j1 = j + 1
            let i1 = i + 1
            this.form[i].flagValue = '序列号与第' + j1 + '个相同'
            this.form[j].flagValue = '序列号与第' + i1 + '个相同'
          } else {
          }
        }
      }
      // 从下至上
      // for (let i = this.form.length - 1; i >= 0; i--) {
      //   for (let j = i - 1; j >= 0; j--) {
      //     if (
      //       this.form[i].serial === this.form[j].serial &&
      //       (this.form[i].serial !== '' || this.form[j].serial !== '')
      //     ) {
      //       this.form[i].flag = true
      //       this.form[j].flag = true
      //       let j1 = j + 1
      //       let i1 = i + 1
      //       this.form[i].flagValue = '序列号与第' + j1 + '个相同'
      //       this.form[j].flagValue = '序列号与第' + i1 + '个相同'
      //     } else {
      //     }
      //   }
      // }
      // 判断index = 1 的时候

      this.form.forEach((item, index) => {
        let indexa = index + 1
        if (this.form[0].serial !== item.serial && index !== 0) {
          this.form[0].flag = false
          this.form[0].flagValue = ''
        } else if (index !== 0 && this.form[0].serial === item.serial) {
          this.form[0].flag = true

          this.form[0].flagValue = '序列号与第' + indexa + '个相同'
        }
      })
    },
    // 添加序列号
    addItem(index) {
      this.form.splice(index + 1, 0, {
        serial: '',
        remark: '',
        flag: false,
        flagValue: ''
      })
      // 添加序列号之后判断重复
      //从上至下
      for (let i = 0; i < this.form.length; i++) {
        for (let j = i + 1; j < this.form.length; j++) {
          if (
            this.form[i].serial === this.form[j].serial &&
            (this.form[i].serial !== '' || this.form[j].serial !== '')
          ) {
            this.form[i].flag = true
            this.form[j].flag = true
            let j1 = j + 1
            let i1 = i + 1
            this.form[i].flagValue = '序列号与第' + j1 + '个相同'
            this.form[j].flagValue = '序列号与第' + i1 + '个相同'
          } else {
            // if (index === i) {
            //   this.form[i].flag = false
            //   this.form[i].flagValue = ''
            // }
            // if (index === j) {
            //   this.form[j].flag = false
            //   this.form[j].flagValue = ''
            // }
          }
        }
      }
      // 从下至上
      for (let i = this.form.length - 1; i > 0; i--) {
        for (let j = i - 1; j > 0; j--) {
          if (
            this.form[i].serial === this.form[j].serial &&
            (this.form[i].serial !== '' || this.form[j].serial !== '')
          ) {
            this.form[i].flag = true
            this.form[j].flag = true
            let j1 = j + 1
            let i1 = i + 1
            this.form[i].flagValue = '序列号与第' + j1 + '个相同'
            this.form[j].flagValue = '序列号与第' + i1 + '个相同'
          } else {
            // if (index === i) {
            //   this.form[i].flag = false
            //   this.form[i].flagValue = ''
            // }
            // if (index === j) {
            //   this.form[j].flag = false
            //   this.form[j].flagValue = ''
            // }
          }
        }
      }
    },
    change(index) {
      this.current = index
    },
    // 保存
    saveBtn() {
      // 判断序列号是否还有重复

      let repeatFlag = false
      let nullFlag = false
      this.form.forEach((item) => {
        if (item.serial === '') {
          nullFlag = true
        }
        if (item.flag === true) {
          repeatFlag = true
        }
      })
      if (nullFlag === true) {
        uni.showToast({
          title: '请将序列号填写完整',
          icon: 'none',
          mask: true
        })
        return
      }
      if (repeatFlag === true) {
        uni.showToast({
          title: '存在重复的序列号',
          icon: 'none',
          mask: true
        })
        return
      }
      // 缓存
      this.cache.form = this.form
      if (this.type === 'add') {
        uni.$emit('addSerial', this.cache.form) // jxc-form-item 用于获取添加的序列号
        uni.setStorageSync('serialList', this.cache.form)
        uni.navigateBack({ delta: 1 })
      } else {
        if (this.editSerial == 'editSerial') {
          console.log('赋值之前的序列号', this.cache)
          uni.setStorageSync('serialEntryCache', this.cache)
          // 获取所有页面栈实例
          let pages = getCurrentPages()
          // // 当前页面实例
          // let nowPage = pages[pages.length - 1]
          // // 上一页面实例
          // let prevPage = pages[pages.length - 2]
          // prevPage.$vm.serialEnterFlag = 1
          // 当前页面实例
          let nowPage = pages[pages.length - 1]
          // 上一页面实例
          let prevPage = pages[pages.length - 2]
          prevPage.$vm.mesFormTop.row.number = this.cache.form.length
          prevPage.$vm.mesFormTop.row.serial = this.cache.form
          uni.navigateBack({ delta: 1 })
        } else {
          uni.setStorageSync('serialEntryCache', this.cache)
          // let pages = getCurrentPages()
          // // 当前页面实例
          // let nowPage = pages[pages.length - 1]
          // // 上一页面实例
          // let prevPage = pages[pages.length - 2]
          // prevPage.$vm.mesFormTop.row.number = this.cache.form.length
          // prevPage.$vm.mesFormTop.row.serial = this.cache.form
          // uni.navigateBack({ delta: 1 })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/static/css/inputWidth.css';
.page {
  min-height: 100vh;
  background-color: #f7f7f7;
  overflow: hidden;
  padding: 0 0 170rpx;
}
// 盒子
.border-box {
  border-top: 1rpx solid #dddddd;
  height: 20rpx;
}
// 批量增加
.content {
  // margin-top: 20rpx;
  padding: 0 24rpx 0;
}
.op-item-box {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 0 32rpx;
  .item {
    border-bottom: 1rpx solid #eeeeee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    &:last-child {
      border: none;
    }
    input {
      font-size: 28rpx;
      text-align: right;
    }
    .item-label {
      color: #111111;
      font-size: 28rpx;
    }
  }
}
// 添加按钮
.addBtn {
  margin-top: 40rpx;
  margin-bottom: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  view {
    width: 702rpx;
    height: 80rpx;
    background: linear-gradient(90deg, #5cc1ff 0%, #1a96ff 100%);
    border-radius: 50rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: #ffffff;
  }
}
// 序列号 备注
.item-box {
  background-color: #fff;
  padding: 0 32rpx;
  margin-bottom: 20rpx;
  .item {
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #eee;
    &:last-child {
      border: none;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      text {
        font-size: 48rpx;
        color: #0e0e0e;
        &:last-child {
          margin-left: 40rpx;
        }
      }
    }
    input {
      font-size: 28rpx;
      text-align: right;
    }
    .item-label {
      color: #111111;
      font-size: 28rpx;
    }
  }
}
// 保存
.save-box {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 750rpx;
  height: 165rpx;
  background-color: #f9f9f9;
  padding: 18rpx 24rpx 0;
  z-index: 999;
  border-top: 1rpx solid #e1e1e1;
  view {
    width: 702rpx;
    height: 80rpx;
    background: linear-gradient(90deg, #5cc1ff 0%, #1a96ff 100%);
    border-radius: 50rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: #ffffff;
  }
}
.tabsBox {
  display: flex;
  line-height: 80rpx;
}
.itemTabs {
  flex: 1;
  text-align: center;
}
.activeTabs {
  flex: 1;
  color: #259eff;
  text-align: center;
  position: relative;
}
.activeTabs::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  margin-left: 40%;
  width: 20%;
  background-color: #259eff;
  height: 6rpx;
}
</style>
